<template>
  <!-- <div>墒情信息</div> -->
  <SubTitle>
        <template #subtitle>墒情信息</template>
      </SubTitle>
  <div class="moistureinformation" ref="moistureinformation"></div>
</template>

<script>
import * as echarts from "echarts";
import SubTitle from "./SubTitle.vue";
export default {
  components:{
    SubTitle
  },
  mounted() {
    setTimeout(() => {
      let moistureinformation = echarts.init(this.$refs.moistureinformation);
    let xData = ["3日", "4日", "5日", "6日", "7日"];
    let yDataone = [22, 20, 35, 40, 30];
    let yDatatwo = [11, 14, 23, 34, 23];
    let option = {
      title: {
        text: "",
      },
      xAxis: {
        data: xData,
        type: "category", //value 数据轴，category 类目轴
      },
      yAxis: {
        splitLine:{
            lineStyle:{
                type:'dashed'
            }
        }
        
      },
      legend:{

      },
      series: [
        {
          //图表类型
          name: "温度",
          type: "bar", //图表类别
          data: yDataone,
          barWidth:30,
  	               barGap:'0%',/*多个并排柱子设置柱子之间的间距*/
  	               barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
          label: {
            show: true,
            position: "top",
          },
          
        },
        {
          //图表类型
          name: "湿度",
          type: "bar", //图表类别
          data: yDatatwo,
          barWidth:30,
          label: {
            show: true,
            position: "top",
          },
          
        },
      ],
    };
    moistureinformation.setOption(option);
    }, 1);
  },
};
</script>

<style lang="less" scoped>
.moistureinformation{
    width: 100%;
    height: 290px;
}
@media screen and (max-width: 720px) {
    .moistureinformation{
      width: 100%;
      height: 300px;
    }
  }
</style>